﻿@model IList<Nop.Web.Models.ShoppingCart.ShoppingCartModel.CheckoutAttributeModel>
@using Nop.Core.Domain.Catalog;
@if (Model.Count > 0)
{
    <div class="checkout-attributes">
        <dl>
            @foreach (var attribute in Model)
            {
                string controlId = string.Format("checkout_attribute_{0}", attribute.Id);
                string textPrompt = !string.IsNullOrEmpty(attribute.TextPrompt) ? attribute.TextPrompt : attribute.Name;
                <dt><label class="text-prompt">
                    @textPrompt
                </label>
                    @if (attribute.IsRequired)
                    {
                        <span class="required">*</span>
                    }
                </dt>
                <dd>
                    @switch (attribute.AttributeControlType)
                    {
                        case AttributeControlType.DropdownList:
                            {
                        <select name="@(controlId)" id="@(controlId)">
                            @if (!attribute.IsRequired)
                            {
                                <option value="0">---</option>
                            }
                            @foreach (var caValue in attribute.Values)
                            {
                                <option selected="@caValue.IsPreSelected" value="@caValue.Id">@caValue.Name
                                    @(!String.IsNullOrEmpty(caValue.PriceAdjustment) ? " [" + caValue.PriceAdjustment + "]" : null)
                                </option>
                            }
                        </select>
                            }
                            break;
                        case AttributeControlType.RadioList:
                            {
                        <ul class="option-list">
                            @foreach (var caValue in attribute.Values)
                            {
                                <li>
                                    <input id="@(controlId)_@(caValue.Id)" type="radio" name="@(controlId)" value="@caValue.Id" checked="@caValue.IsPreSelected" />
                                    <label for="@(controlId)_@(caValue.Id)">@caValue.Name @(!String.IsNullOrEmpty(caValue.PriceAdjustment) ? " [" + caValue.PriceAdjustment + "]" : null)</label>
                                </li>
                            }
                        </ul>
                            }
                            break;
                        case AttributeControlType.Checkboxes:
                            {
                        <ul class="option-list">
                            @foreach (var caValue in attribute.Values)
                            {
                                <li>
                                    <input id="@(controlId)_@(caValue.Id)" type="checkbox" name="@(controlId)" value="@caValue.Id" checked="@caValue.IsPreSelected" />
                                    <label for="@(controlId)_@(caValue.Id)">@caValue.Name @(!String.IsNullOrEmpty(caValue.PriceAdjustment) ? " [" + caValue.PriceAdjustment + "]" : null)</label>
                                </li>
                            }
                        </ul>
                            }
                            break;
                        case AttributeControlType.TextBox:
                            {
                        <input name="@(controlId)" type="text" class="textbox" id="@(controlId)" @(!String.IsNullOrWhiteSpace(attribute.DefaultValue) ? " value=" + attribute.DefaultValue : null) />
                            }
                            break;
                        case AttributeControlType.MultilineTextbox:
                            {
                        <textarea id="@(controlId)" name="@(controlId)">@(!String.IsNullOrWhiteSpace(attribute.DefaultValue) ? attribute.DefaultValue : null)</textarea>
                            }
                            break;
                        case AttributeControlType.Datepicker:
                            {
                        @Html.DatePickerDropDowns(controlId + "_day", controlId + "_month", controlId + "_year", DateTime.Now.Year, DateTime.Now.Year + 1, attribute.SelectedDay, attribute.SelectedMonth, attribute.SelectedYear)
                            }
                            break;
                        case AttributeControlType.FileUpload:
                            {
                                
                                //register CSS and JS
                                Html.AddCssFileParts("~/Scripts/fineuploader/fineuploader-4.2.2.min.css");
                                Html.AddScriptParts("~/Scripts/fineuploader/jquery.fineuploader-4.2.2.min.js");

                                //ex. ['jpg', 'jpeg', 'png', 'gif'] or []
                                var allowedFileExtensions = string.Join(", ", attribute.AllowedFileExtensions.Select(x => "'" + x.Trim() + "'").ToList());
                            
                        <input id="@(controlId)" name="@(controlId)" type="hidden" />
                        @*fine uploader container*@
                        <div id="@(controlId)uploader"></div>
                        @*fine uploader template (keep it synchronized to \Content\fineuploader\templates\default.html)*@
                        <script type="text/template" id="@(controlId)-qq-template">
                            <div class="qq-uploader-selector qq-uploader">
                                <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                                    <span>@T("Common.FileUploader.DropFiles")</span>
                                </div>
                                <div class="qq-upload-button-selector qq-upload-button">
                                    <div>@T("Common.FileUploader.Upload")</div>
                                </div>
                                <span class="qq-drop-processing-selector qq-drop-processing">
                                    <span>@T("Common.FileUploader.Processing")</span>
                                    <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
                                </span>
                                <ul class="qq-upload-list-selector qq-upload-list">
                                    <li>
                                        <div class="qq-progress-bar-container-selector">
                                            <div class="qq-progress-bar-selector qq-progress-bar"></div>
                                        </div>
                                        <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                                        <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
                                        <span class="qq-upload-file-selector qq-upload-file"></span>
                                        <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                                        <span class="qq-upload-size-selector qq-upload-size"></span>
                                        <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">@T("Common.FileUploader.Cancel")</a>
                                        <a class="qq-upload-retry-selector qq-upload-retry" href="#">@T("Common.FileUploader.Retry")</a>
                                        <a class="qq-upload-delete-selector qq-upload-delete" href="#">@T("Common.FileUploader.Delete")</a>
                                        <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
                                    </li>
                                </ul>
                            </div>
                        </script>
                        <script type="text/javascript">
                            $(document).ready(function() {
                                $("#@(controlId)uploader").fineUploader({
                                    request: {
                                        endpoint: '@(Url.RouteUrl("UploadFileCheckoutAttribute", new { attributeId = attribute.Id }))'
                                    },
                                    template: "@(controlId)-qq-template",
                                    multiple: false,
                                    validation: {
                                        allowedExtensions: [@Html.Raw(allowedFileExtensions)]
                                    }
                                }).on("complete", function(event, id, name, responseJSON, xhr) {
                                    $("#@(controlId)").val(responseJSON.downloadGuid);
                                    if (responseJSON.message) {
                                        alert(responseJSON.message);
                                    }
                                });
                            });
                        </script>
                    
                            }
                            break;
                        case AttributeControlType.ColorSquares:
                            {
                                <ul class="option-list color-squares" id="color-squares-@(attribute.Id)">
                                    @foreach (var caValue in attribute.Values)
                                    {
                                        <li @(caValue.IsPreSelected ? @Html.Raw(" class=\"selected-value\"") : null)>
                                            <label for="@(controlId)_@(caValue.Id)">
                                                <span class="color-container" title="@caValue.Name @(!String.IsNullOrEmpty(caValue.PriceAdjustment) ? " [" + caValue.PriceAdjustment + "]" : null)">
                                                    <span class="color" style="background-color:@(caValue.ColorSquaresRgb);">&nbsp;</span>
                                                </span>
                                                <input id="@(controlId)_@(caValue.Id)" type="radio" name="@(controlId)" value="@caValue.Id" checked="@caValue.IsPreSelected" />
                                                @*uncomment below to display attribute value name*@
                                                @*<span class="name">@caValue.Name @(!String.IsNullOrEmpty(caValue.PriceAdjustment) ? " [" + caValue.PriceAdjustment + "]" : null)</span>*@
                                            </label>
                                        </li>
                                    }
                                </ul>
                                <script type="text/javascript">
                                    $(document).ready(function() {
                                        $('.checkout-attributes #color-squares-@(attribute.Id)').delegate('input', 'click', function (event) {
                                            $('.checkout-attributes #color-squares-@(attribute.Id)').find('li').removeClass('selected-value');
                                            $(this).closest('li').addClass('selected-value');
                                        });
                                   });
                                </script>
                            }
                            break;
                    }
                </dd>
            }
        </dl>
    </div>
}